// @import '@/assets/scss/animation';

.border-bottom {
    border-bottom: solid 1px #ddd;
}

.border-right {
    border-right: solid 1px #ddd;
}

// 想要有移入和点击效果
.hover-active {
    &:hover {
        filter: brightness(1.08);
    }
    &:active {
        filter: brightness(0.95);
    }
}

// 只要感觉是按钮，就可以使用这个类。需要修改时，在自己的 vue 文件中进行修改即可
.btn-normal {
    width        : 100px;
    height       : 34px;
    margin       : 10px;
    background   : skyblue;
    color        : #fff;
    border-radius: 4px;
    box-shadow   : 0 0 10px 0 #ddd;
    border       : none;
    outline      : none;
    cursor       : pointer;
    font-size    : 14px;

    &:hover {
        filter: brightness(1.1);
    }

    &:active {
        filter: brightness(0.9);
    }
}


// 解决高度坍塌和外边距折叠, 如果该元素需要自己使用伪元素, 则不要添加该类
.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
    clear  : both;
}

// 按钮的基本样式, 该类只设置其颜色、居中、hover 变化。具体大小不设置
.btn-light {
    border-radius: 20px;

    background-color: #2378ff;
    color           : #eee;
    fill            : #eee;

    display        : flex;
    align-items    : center;
    justify-content: center;

    &:hover {
        filter: brightness(1.1);
        color : #fff;
    }
}

// 想要字体左右有点 padding 不至于贴边的就用这个（用了这个需要注意上下的距离）
//还有一般用于宽度等于字体宽度的. 一般用于 span.
// 单个词组一般就使用 span 包装, 这样他的宽度是 content 宽度
.text-padding {
    padding      : 0;
    padding-right: 8px;
    padding-left : 8px;
}

// 需要设置为 flex 并且要垂直方向上居中的就设置此类
.flex-center {
    display    : flex;
    align-items: center;
}

// 想要鼠标移入时有背景色, 有小手, 并且字体变色的的就用此类
.hover-light:hover {
    background-color: #fafafa;
    color           : #448cff;
    border-color    : #448cff;
    fill            : #448cff;
    cursor          : pointer;
}

// 链接相关的被激活时的样式，一般是 router-link 使用此类
.link-active {
    background-color: #f5f9ff;
    color           : #448cff;
    fill            : #448cff;
}

// 需要过渡的均使用该类
.transition {
    transition: all 0.25s ease;

}

// 圆形
.radius-circle {
    border-radius: 100%;
}

// 鼠标变为禁止. 因为只有一个类名,并且样式也很简单，所以使用了 !important
.forbidden {
    cursor: not-allowed !important;
}


.fontOpacity {
    color: transparent !important;
}

// 按钮样式, cv codepen 的
.btn-frame {
    margin: 20px auto;

    .custom-btn {
        width        : 130px;
        height       : 40px;
        color        : #fff;
        border-radius: 5px;
        padding      : 10px 25px;
        font-weight  : 500;
        background   : transparent;
        cursor       : pointer;
        transition   : all 0.3s ease;
        position     : relative;
        display      : inline-block;
        border       : none;
        box-shadow   : inset 2px 2px 2px 0px rgba(255, 255, 255, 50%), 7px 7px 20px 0px rgba(0, 0, 0, 10%), 4px 4px 5px 0px rgba(0, 0, 0, 10%);
        outline      : none;
    }

    .btn-danger {
        background : #b8acb2;
        line-height: 42px;
        padding    : 0;
        border     : none;

        &:before,
        &:after {
            position: absolute;
            content : "";
            height  : 0%;
            width   : 1px;

            transition   : all 500ms ease;
            // box-shadow:
            //   -1px -1px 20px 0px rgba(255, 255, 255, 1),
            //   -4px -4px 5px 0px rgba(255, 255, 255, 1),
            //   7px 7px 20px 0px rgba(0, 0, 0, .4),
            //   4px 4px 5px 0px rgba(0, 0, 0, .3);
            box-shadow   :
                -1px -1px 20px 0px #000,
                -4px -4px 5px 0px #000,
                7px 7px 20px 0px #000,
                4px 4px 5px 0px #000;
        }

        &:before {
            right: 0;
            top  : 0;
        }

        &:after {
            left  : 0;
            bottom: 0;
        }

        &:hover {
            background: #f0094a;
            color     : #FFF;
            box-shadow: none;

            @include shake-horizontal;

        }

        &:hover:before,
        &:hover:after {
            transition: all 500ms ease;
            height    : 100%;
        }


        span {
            position: relative;
            display : block;
            width   : 100%;
            height  : 100%;

            &:before,
            &:after {
                position     : absolute;
                content      : "";
                width        : 0%;
                height       : .5px;
                transition   : all 500ms ease;
                // box-shadow:
                //   -1px -1px 20px 0px rgba(255, 255, 255, 1),
                //   -4px -4px 5px 0px rgba(255, 255, 255, 1),
                //   7px 7px 20px 0px rgba(0, 0, 0, .4),
                //   4px 4px 5px 0px rgba(0, 0, 0, .3);
                box-shadow   :
                    -1px -1px 20px 0px #000,
                    -4px -4px 5px 0px #000,
                    7px 7px 20px 0px #000,
                    4px 4px 5px 0px #000;
            }

            &:before {
                left: 0;
                top : 0;
            }

            &:after {
                right : 0;
                bottom: 0;
            }

            &:hover:before,
            &:hover:after {
                width: 100%;
            }
        }
    }

    .btn-primary {
        background-color: #00acee;

        &:hover {
            filter: brightness(1.1);
        }

        &:active {
            filter: brightness(0.9);
        }
    }

}


label.switch-frame {
    margin-top : 20px;
    user-select: none;
    display    : flex;
    align-items: center;
    position   : relative;
    cursor     : pointer;


    input[type="checkbox"] {
        opacity : 0;
        position: absolute;
    }

    $h: 15px;
    $w: 26px;

    .switch-btn {
        width           : $w;
        height          : $h;
        padding         : 1px;
        margin-right    : 6px;
        background-color: #FFF;
        border-radius   : 7px;
        box-shadow      : 0 0 10px 0 #d1d1d1;
        position        : relative;

        .thumb {
            display         : block;
            width           : calc($h - 2px);
            height          : calc($h - 2px);
            border-radius   : 100%;
            background-color: #d4d4d4;
            position        : absolute;
            top             : 1px;
            left            : 2px;
            transition      : .2s;
        }
    }

    .text {
        font-size: 14px;
    }

    input[type="checkbox"]:checked+.switch-btn {
        background-color: skyblue;

        .thumb {
            width           : calc($h - 4px);
            height          : calc($h - 4px);
            top             : 2px;
            left            : calc($w - $h + 1px);
            background-color: #FFF;
        }
    }
}

span.tag {

    display        : flex;
    align-items    : center;
    justify-content: center;
    --h            : 50px;
    width          : 140px;
    height         : var(--h);
    position       : relative;
    border-radius  : 4px 4px 4px 0px;

    /* 加高光 */
    background           : linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) rgba(20, 30, 41, 0.76);
    /* 处理高光泛白 */
    background-blend-mode: soft-light;
    background-color     : #ea9234;

    &::before {
        content  : '';
        position : absolute;
        --a      : calc(var(--h) / 5);
        width    : var(--a);
        height   : var(--a);
        left     : 0;
        bottom   : calc(var(--a) * -1);
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        /*三角*/

        background-color   : inherit;
        /* 实现颜色变深一点 */
        /* background      : #BB2A39; 方式一, 写死, 不推荐 */
        /* background      : linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); 方式二: 加层半透明渐变 */
        /* filter          : brightness(.7); 方式三: 滤镜实现 */
        /* background-color: color-mix(in srgb, #34c9eb 10%, white); 方式四: 草案 浏览器未实现 */
        filter             : brightness(.7);
    }
}